<!--菜单6:
建筑能耗统计,查看消详细页面内容-->
<template>
    <!--    -->
    <el-row :gutter="0" class = "MonitoringBranch_container1 container1">
        <!--电量统计-->
        <LayoutLeft :title="titles[radio - 1]">
            <DLTJchart v-if="radio==1 && radio1 == 1"></DLTJchart>
            <DLTJDataFrom v-if="radio==2 && radio1 == 1"></DLTJDataFrom>
        </LayoutLeft>
        <LayoutRight title="电量统计">
            <div class="right_body2">
                <div>
                    选择对象：
                    <br>
                    <el-select class="EnergyConsumptionDetial_select" v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>显示方式 :</div>
                <div><el-radio-group v-model="radio">
                    <el-radio :label="1">图像</el-radio>
                    <el-radio :label="2">数据表格</el-radio>
                </el-radio-group></div>
                <div class="block">
                    <span class="demonstration">年:&nbsp;&nbsp;&nbsp;</span>
                    <el-date-picker
                        v-model="value3"
                        type="year"
                        placeholder="选择年">
                    </el-date-picker>
                </div>
                <div class="block">
                    <span class="demonstration">月:&nbsp;&nbsp;&nbsp;</span>
                    <el-date-picker
                        v-model="value2"
                        type="month"
                        placeholder="选择月">
                    </el-date-picker>
                </div>
                <div class="block">
                    <span class="demonstration">日:&nbsp;&nbsp;&nbsp;</span>
                    <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div class="Statistical_methods">
                    统计方式：
                    <br>
                    <el-radio-group v-model="radio1">
                        <el-radio :label="1">总量统计</el-radio>
                        <el-radio :label="2">分项统计</el-radio>
                    </el-radio-group>
                </div>
                <div  v-if="radio1 == 2">
                    分类分项：
                    <br>
                    <el-select class="EnergyConsumptionDetial_select" v-model="value1" placeholder="请选择">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div  v-if="radio1 == 2">
                    值类型：
                    <br>
                    <el-select class="EnergyConsumptionDetial_select" v-model="value2" placeholder="请选择">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <LayoutCard class="right-bottom">
                <div>
                    <img src="../../assets/img/img1.png">
                    <span>电量统计</span>
                </div>
            </LayoutCard>
        </LayoutRight>
    </el-row>
</template>
<script>
    import DLTJchart from "../../components/EnergyConsumptionDetial/DLTJ/totalchart"
    import DLTJDataFrom from "../../components/EnergyConsumptionDetial/DLTJ/totalDataForm"
    import ZMCZtotalchart from "../../components/EnergyConsumptionDetial/ZMCZ/totalchart"
    import ZMCZtotalDataFrom from "../../components/EnergyConsumptionDetial/ZMCZ/totalDataFrom"
    import LayoutRight from "@/components/Layout/LayoutRight";
    import LayoutLeft from "@/components/Layout/LayoutLeft";
    import LayoutCard from "@/components/Layout/LayoutCard";
    export default {
        components:{
            LayoutCard,
            LayoutLeft,
            LayoutRight,
            DLTJchart,
            DLTJDataFrom,
            ZMCZtotalchart,
            ZMCZtotalDataFrom
        },
        data() {
            return {
                test: 1,
                radio: 1,
                radio1: 1,
                value:'',
                value1:'',
                value2:'',
                value3: '',
                options: [{
                    value: '选项1',
                    label: '汝阳县人民医院'
                },],
                options1: [
                    {
                        value: '选项3',
                        label: '照明插座用电量'
                    },
                    {
                        value: '选项4',
                        label: '空调用电量'
                    },
                    {
                        value: '选项5',
                        label: '动力用电量'
                    },
                    {
                        value: '选项6',
                        label: '特殊用电量'
                    },
                ],
                options2: [

                    {
                        value: '选项8',
                        label: '总能耗'
                    },
                    {
                        value: '选项9',
                        label: '人均能耗'
                    },
                    {
                        value: '选项10',
                        label: '单位面积能耗'
                    },
                ],
            };
        },
        created() {
            // 定义常量
            this.titles = ['汝阳市人民医院电量统计图', '汝阳市人民医院电量统计表'];
        }

    };
</script>
<style scoped>
    .container1{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .right-bottom > div {
        padding: 0.1em 0.2em;
    }

    .right-bottom > div > * {
        font-size: medium;
        vertical-align: middle;
        margin-right: 0.1em;
    }

    .right_body2{
        flex: 1;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        color: #999999;
    }
    .right_body2 select{
        width: 205px;
        height: 25px;
        margin-bottom: 10px;
    }
    .MonitoringBranch_calender /deep/ .el-calendar-table .el-calendar-day {
        height: 30px;
    }
</style>
